<template>
    <div class="demo-main">
        <div class="demo-head"><i class="bk-icon icon-pc"></i>首页</div>
        <div class="search-main">
            <bk-input style="width: 320px"
                placeholder="请输⼊搜索内容"
                :clearable="true"
                v-model="searchval"
                @clear="clear"
                @keyup.enter="searchValue"
            >
            </bk-input>
            <bk-button :theme="'primary'" :title="'主要按钮'"
                clearable="true"
                @click="searchValue">搜索</bk-button>
        </div>
        <div class="list-main">
            <div class="list-head">
                <span><i class="bk-icon icon-dialogue"></i>消息列表</span>
                <bk-switcher v-model="tableShow" theme="primary"></bk-switcher>
            </div>
        </div>
        <div class="list-context">
            <div v-if="tableShow">
                <bk-table
                    ext-cls="table-list"
                    :data="data"
                    :size="'small'"
                    :show-header="false">
                    <bk-table-column label="内容" prop="content"></bk-table-column>
                    <bk-table-column label="状态" prop="status" width="30">
                        <template slot-scope="props">
                            <div v-if="props.row.status === 'success'" style="color: green">
                                <i class="bk-icon icon-check-circle-shape"></i>
                            </div>
                            <div v-else style="color:red;">
                                <i class="bk-icon icon-close-circle-shape"></i>
                            </div>
                        </template>
                    </bk-table-column>
                    <bk-table-column label="详情" width="50">
                        <template slot-scope="props">
                            <div v-if="props.row.status.length > 0" style="color: #2d8cf0">
                                <i class="bk-icon icon-order"
                                    @click="showDetail(props.row)"></i>
                            </div>
                        </template>
                    </bk-table-column>
                </bk-table>
            </div>
            <div class="total" v-else>
                <i class="bk-icon icon-dialogue"></i>
                Hello, 你有 {{data.length}} 条消息
            </div>
            <bk-dialog v-model="showDialog"
                theme="primary"
                :mask-close="false"
                :header-position="'left'">
                <span>{{detail}}</span>
            </bk-dialog>
        </div>
    </div>
</template>
<style lang="postcss" scoped>
    .demo-main {
    padding: 10px 35px;
    }
    .demo-head {
    margin: 15px 0 25px;
    font-size: 18px;
    }
    .demo-head i {
    font-size: 22px;
    margin-right: 10px;
    color: #3a84ff;
    }
    .search-main {
    margin: 20px 0;
    width: 100%;
    display: flex;
    }
    .list-main {
    margin-top: 30px;
    width: 100%;
    min-height: 1px;
    border: 1px solid #dcdee5;
    border-radius: 2px;
    }
    .list-main .icon-dialogue {
    margin-right: 10px;
    color: #3a84ff;
    }
    .list-head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #f8fafd;
    padding-left: 30px;
    border-bottom: 1px solid #e9ebf0;
    }
    .list-head span {
    display: inline-block;
    width: 96%;
    height: 100%;
    }
    .list-context {
    padding: 5px 0px 10px;
    }
    .table-list {
    margin-left: 1px;
    border: none;
    }
    .total {
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: center;
 }
</style>
<script>
    import { bkInput, bkButton, bkDialog } from 'bk-magic-vue'
    export default {
        name: 'index',
        components: {
            bkInput,
            bkButton,
            bkDialog
        },
        data () {
            return {
                searchval: '',
                searchList: [],
                data: [{
                           content: '1、你的"20181212112308"单据已通过',
                           status: 'success',
                           detail: '你的"20181212112308"单据已通过(1分钟前)'
                       },
                       {
                           content: '2、你的"20181212112308"单据被驳回',
                           status: 'error',
                           detail: '你的"20181212112308"单据被驳回(9⽉6⽇)'
                       },
                       {
                           content: '3、你的"20181212112308"单据部分被驳回',
                           status: 'error',
                           detail: '你的"20181212112308"单据部分被驳回(9⽉5⽇)'
                       },
                       {
                           content: '4、jinnyyang 提醒了你',
                           status: 'success',
                           detail: 'jinnyyang 提醒了你(12月14日)'
                       },
                       {
                           content: '5、edwinwu 重新申请了“201812121108”内关于“蓝鲸作业平台”的权限申请。',
                           status: 'success',
                           detail: 'edwinwu 重新申请了“201812121108”内关于“蓝鲸作业平台”的权限申请(10月1日)'
                       }
                ],
                tableShow: true,
                showDialog: false,
                detail: ''
            }
        },
        methods: {
            showDetail (row) {
                this.showDialog = true
                this.detail = row.detail
            },
            searchValue: function () {
                const realData = []
                this.data.forEach(element => {
                    if (element.content.indexOf(this.searchval) !== -1) {
                        realData.push(element)
                    }
                })
                this.data = realData
            }
        }
    }
</script>
